<template>
	<div>

		<!-- 数据更新时间 -->
		<div class="update-time">
			<div class="name">实时数据</div>
			<div class="time" v-show="updateTime">更新时间：{{updateTime}}</div>
		</div>

		<el-row :gutter="20" style="display: flex;">
			<!-- 成交金额统计 -->
			<el-col :span="15">
				<el-card class="h-100">
					<div class="title">成交统计</div>
					<div class="data-item with-chart">
						<i class="icon i-rmb" style="background-color: #ff6700;"></i>
						<div class="right">
							<span class="name">今日成交金额（元）</span>
							<span class="value">￥{{todayAmount}}</span>
						</div>
					</div>
					<div class="chart" ref="orderChart"></div>
				</el-card>
			</el-col>
			<!-- 商城其它数据统计 -->
			<el-col :span="9">
				<el-card class="h-100">
					<div class="title">数据统计</div>
					<el-row>
						<el-col :span="12" v-for="(item, index) in dataItems" :key="index">
							<div class="data-item alone">
								<i :class="item.iconClass" :style="{'background-color': item.bgColor}"></i>
								<div class="right">
									<span class="name">{{item.name}}</span>
									<span class="value">{{statistics[item.valueKey]}}</span>
									<div class="sub">
										<span class="value">{{statistics[item.sub.valueKey]}}</span>
										<span class="name">{{item.sub.name}}</span>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="20" style="margin-top: 20px;display: flex;">
			<el-col :span="15">
				<el-card class="h-100">
					<div class="title">销售排行</div>
					<el-table class="goods-table" :data="salesRank" :height="300">
						<el-table-column label="排名" type="index" width="100"></el-table-column>
						<el-table-column label="商品" width="400">
							<template slot-scope="props">
								<div class="goods">
									<el-image class="thumb" :src="props.row.thumbUrl" fit="cover"></el-image>
									<span class="name">{{props.row.name}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="销量" :formatter="row => row.salesVolume + row.unit" align="right"></el-table-column>
						<el-table-column label="成交金额" :formatter="row => '￥' + row.salesAmount" align="right"></el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="9">
				<el-card class="h-100">
					<div class="title">品牌销售额占比</div>
					<div class="chart brand" ref="brandChart"></div>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import config from '@/common/config/index/index.config.js';
	import echarts from 'echarts';

	export default {
		data() {
			return {
				todayAmount: 0,
				dataItems: config.dataItems,
				statistics: {},
				salesRank: [],
				updateTime: ''
			}
		},
		created() {
			this.findStatistics();
			this.findSalesRank();
		},
		mounted() {
			// 初始化近一年订单成交额图表
			this.orderChart = echarts.init(this.$refs.orderChart);
			this.configOrderChart();
			// 初始化品牌销售额占比图表
			this.brandChart = echarts.init(this.$refs.brandChart);
			this.configBrandChart();

			// 自动刷新
			this.autoGetData();
			// 获取更新时间
			this.getUpdateTime();
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			configOrderChart() {
				this.$util.request('/statistic/paidAmounts', {}, (res) => {
					// 赋值给今日成交金额
					this.todayAmount = res.todayAmount || 0;
					// 获取该图表配置信息
					const options = config.orderChartOptions;
					// 计算最近12个月
					options.xAxis.data = this.getLast12Months();
					// 金额数据赋值给图表配置项
					options.series[0].data = res.lastYearAmounts;
					// 设置配置信息
					this.orderChart.setOption(options);
				}, true);
			},
			getLast12Months() {
				const months = [];
				const now = new Date();

				// 获取完整的月份信息
				const getFullMonth = (date) => {
					const fullYear = date.getFullYear().toString().substr(2);
					return fullYear + '年' + (date.getMonth() + 1) + '月';
				}

				for (let i = 0; i < 12; i++) {
					if (i != 0) now.setMonth(now.getMonth() - 1);
					months.push(getFullMonth(now));
				}
				return months.reverse();
			},
			getUpdateTime() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();

				const dateStr = [year, month, day].map(e => e < 10 ? '0' + e : e).join('-');
				const timeStr = [hour, minute, second].map(e => e < 10 ? '0' + e : e).join(':');
				this.updateTime = [dateStr, timeStr].join(' ');
			},
			findStatistics() {
				this.$util.request('/statistic/cores', {}, (res) => {
					this.statistics = res;
				}, true);
			},
			findSalesRank() {
				this.$util.request('/statistic/goodsSalesRank', {}, (res) => {
					this.salesRank = res;
				}, true);
			},
			configBrandChart() {
				this.$util.request('/statistic/brandSalesRank', {}, (res) => {
					// 获取图表配置
					const options = config.brandChartOptions;
					options.series[0].data = res.map(e => {
						return {
							name: e.brandName,
							value: e.salesAmount
						};
					});
					// 设置配置信息
					this.brandChart.setOption(options);
				}, true);
			},
			autoGetData() {
				this.timer = setInterval(() => {
					this.findSalesRank();
					this.findStatistics();
					this.configOrderChart();
					this.configBrandChart();
					this.getUpdateTime();
				}, 1000 * 60);
			}
		}
	}
</script>

<style lang="scss">
	.update-time {
		@extend %flex-align-center;
		margin-bottom: 20px;

		.name {
			font-size: 14px;
			font-weight: bold;
		}

		.time {
			font-size: 12px;
			margin-left: 20px;
			color: $text-color-grey;
		}
	}

	.title {
		font-weight: bold;
	}

	.data-item {
		@extend %flex-align-center;

		&.with-chart {
			margin-bottom: -40px;
			margin-top: 20px;
		}

		&.alone {
			margin: 30px 0;

			.right {
				line-height: 2;
			}
		}

		i {
			width: 50px;
			height: 50px;
			line-height: 50px;
			color: #fff;
			font-size: 26px;
			text-align: center;
			border-radius: 50%;
		}

		.right {
			margin-left: 10px;

			&>.name {
				font-size: 12px;
				color: $text-color-grey;
				display: block;
				margin-bottom: 2px;
			}

			&>.value {
				font-size: 20px;
				font-weight: bold;
			}

			.sub {
				font-size: 12px;

				.value {
					color: #666666;
					font-weight: bold;
					margin-right: 10px;
				}

				.name {
					color: $text-color-grey;
				}
			}
		}
	}

	.chart {
		width: 100%;
		height: 260px;

		&.brand {
			padding-top: 10%;
		}
	}

	.goods-table {

		td,
		th {
			border-bottom: none !important;
		}

		thead {
			color: #333;
		}

		&::before {
			height: 0;
		}
	}

	.goods {
		@extend %flex-align-center;

		.thumb {
			width: 40px;
			height: 40px;
		}

		.name {
			color: #666;
			margin-left: 10px;
		}
	}
</style>
